<template>
    <div class="table">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-menu"></i> 系统管理</el-breadcrumb-item>
                <el-breadcrumb-item>开发者账号管理</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="handle-box">

            <el-button type="primary" size="mini" icon="" @click="addFormVisible = true">添加开发者账号</el-button>

        </div>
        <el-table size="mini" :data="tableData" border style="width: 100%">


            <el-table-column prop="developerid" label="角色编码" width="" v-if=false></el-table-column>
            <el-table-column prop="name" label="账号名称" width=""></el-table-column>
            <el-table-column prop="pwd" label="账号密码" width=""></el-table-column>
            <el-table-column prop="devices" label="当前设备数" width=""></el-table-column>


            <el-table-column label="操作" width="300">
                <template slot-scope="scope">
                    <el-button @click="edit(scope.$index, scope.row)"
                               size="mini">编辑
                    </el-button>
                 
                    <el-button @click="deleteRow(scope.row._id)" type="danger"
                               size="mini">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--分页-->
        <div class="pagination" style="float: left">
            <el-pagination small
                           @current-change="handleCurrentChange" background
                           layout="total, prev, pager, next, jumper"
                           :total="totalPage">
            </el-pagination>
        </div>

        <!--新增弹窗-->
        <el-dialog title="新增开发者账号" :visible.sync="addFormVisible" size="tiny">
            <el-form :model="form" size="mini" :rules="rules" ref="ruleForm">
                <el-form-item label="账号名称:" :label-width="formLabelWidth" prop="name">
                    <el-input v-model="form.name" placeholder="请填写账号名称" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="密码:" :label-width="formLabelWidth" prop="pwd">
                    <el-input v-model="form.pwd" placeholder="请填写密码" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="设备数:" :label-width="formLabelWidth" prop="devices">
                    <el-input v-model="form.devices" placeholder="请填写设备数" auto-complete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="addFormVisible = false;resetForm()">取 消</el-button>
                <el-button type="primary" @click="add('ruleForm')">确 定</el-button>
            </div>
        </el-dialog>
        <!-- 编辑弹窗 -->
        <el-dialog title="编辑角色" size="tiny" :visible.sync="editFormVisible">
            <el-form :model="form" size="mini" :rules="rules" ref="ruleForm">
                <el-form-item label="账号名称:" :label-width="formLabelWidth" prop="name">
                    <el-input v-model="form.name" placeholder="请填写账号名称" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="密码:" :label-width="formLabelWidth" prop="pwd">
                    <el-input v-model="form.pwd" placeholder="请填写密码" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="设备数:" :label-width="formLabelWidth" prop="devices">
                    <el-input v-model="form.devices" placeholder="请填写设备数" auto-complete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="editFormVisible = false;resetForm()">取 消</el-button>
                <el-button type="primary" @click="editConfirm('ruleForm')">确 定</el-button>
            </div>
        </el-dialog>

      
    </div>

</template>

<script>

  export default {
    data: function () {
      return {        
        tableData: [],
        addFormVisible: false,
        editFormVisible: false,        
        formLabelWidth: '120px',
        pagination: 1,
        cur_page: 1,
        pagerow: 10,
        totalPage: 1,
        form: {
          developerid: '',
          name: '',
          pwd: '',
          devices:''
        },
        rules: {
          name: [
            {required: true, message: '请输入名称', trigger: 'blur'}
          ],
          pwd: [
            {required: true, message: '请输入密码', trigger: 'blur'}
          ]
        }
      }
    },

    created() {
      this.findrecord()//初始化
    },
    methods: {
      resetForm() {
        this.form = {
          developerid: '',
          name: '',
          pwd: '',
          devices:''
        }
      },
      /*添加*/
      add(ruleForm) {
        this.$refs[ruleForm].validate((valid) => {
          if (valid) {
            this.$axios.post('/developer/add', this.form).then(res => {
              if (res.data.code == 0) {
                this.addFormVisible = false;
                this.$message.info(res.data.message);
                this.findrecord()
                this.resetForm()
              }
              else {
                this.$message.error(res.data.message);
              }
            }).catch(err => {
              this.$message.error('请求服务器失败，请稍后再试！');
            })
          } else {
            this.$message({
              message: '信息有误或者不完整，请重试。',
              type: 'warning'
            });
            return false;
          }
        });
      },
      /*弹出编辑窗*/
      edit(index, row) {
        this.editFormVisible = true;
        this.form.developerid = row._id;        
        this.form.name = row.name;
        this.form.pwd = row.pwd;
        this.form.devices = row.devices;
      },
     
      /*编辑确认*/
      editConfirm(ruleForm) {
        this.$refs[ruleForm].validate((valid) => {
          if (valid) {
            let url = '/developer/update';            
            this.$axios.post(url, this.form).then((res) => {
              if (res.data.code == 0) {
                this.editFormVisible = false;
                this.$message.info(res.data.message);
                this.findrecord()
                this.resetForm()
              } else {
                this.$message.error(res.data.message);
              }
            }).catch((err) => {
              this.$message.error('请求服务器失败，请稍后再试！');
            })
          } else {
            return false;
          }
        })
      },
      /*删除*/
      deleteRow(rowid) {
        this.$confirm("确定删除此记录吗?", "提示", {type: 'warning'})
          .then(() => {
            this.$axios.post('/developer/del', {developerid: rowid})
              .then((res) => {
                if (res.data.code == 0) {
                  this.$message.info('您已成功删除该记录!');
                  this.findrecord()
                } else {
                  this.$message.error(res.data.message);
                }
              }).catch(err => {
              this.$message.error('请求服务器失败，请稍后再试！');
            })
          }).catch(() => {
          this.$message.info('已取消该删除操作!');
        })
      },

      //分页
      handleCurrentChange(val) {
        this.cur_page = val;
        this.findrecord()
      },
      
        /*查询所有角色*/
      findrecord() {
        let self = this
        let params = {
          skipnum: self.cur_page,
          pagesize: self.pagerow
        }

        self.$axios.get('/developer/find', {skipnum:self.pagerow*(self.cur_page-1),pagesize:self.pagerow})
          .then(function (response) {
            self.tableData = response.data.data
            self.totalPage = response.data.rowcount
          })
          .catch(function (error) {
            console.log(error);
          });

      }

    }
  }
</script>

<style scoped>
    .handle-box {
        margin-bottom: 20px;
    }
</style>
